import { useState } from 'react'

// 这是一个故意设计得比较重的组件，用于测试加载进度
const HeavyComponent = () => {
  const [count, setCount] = useState(0)
  const [items] = useState(Array.from({ length: 1000 }, (_, i) => `Item ${i + 1}`))

  return (
    <div className="heavy-component">
      <h3>重型组件演示</h3>
      <p>这个组件包含大量数据，用于测试Vite的模块加载进度。</p>
      
      <div className="counter-section">
        <p>当前计数: {count}</p>
        <button onClick={() => setCount(count + 1)}>增加</button>
        <button onClick={() => setCount(count - 1)}>减少</button>
      </div>

      <div className="list-section">
        <h4>大数据列表 (1000项)</h4>
        <div className="scrollable-list">
          {items.slice(0, 50).map(item => (
            <div key={item} className="list-item">
              {item}
            </div>
          ))}
          <p style={{ textAlign: 'center', color: '#666' }}>
            ... 显示前50项，共{items.length}项 ...
          </p>
        </div>
      </div>

      <div className="image-section">
        <h4>图片加载测试</h4>
        <div className="image-grid">
          {Array.from({ length: 9 }, (_, i) => (
            <div key={i} className="image-placeholder">
              <div className="placeholder-content">
                Image {i + 1}
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  )
}

export default HeavyComponent